<template>
  <div class="processRecord">
    <p-table bordered :pagination="false" :columns="columns" :data-source="tableData">
      <span :class="{handing: row.taskStatus === 2}" slot="startTime" slot-scope="text,row">{{ row.startTime }} </span>
      <span :class="{handing: row.taskStatus === 2}" slot="endTime" slot-scope="text,row">{{ row.endTime }} </span>
      <span :class="{handing: row.taskStatus === 2}" slot="activityName" slot-scope="text,row">{{ row.activityName }} </span>
      <span :class="{handing: row.taskStatus === 2}" slot="assigneeName" slot-scope="text,row">{{ row.assigneeName }} </span>
      <span :class="{handing: row.taskStatus === 2}" slot="readStatus" slot-scope="text,row">{{ readStatusMap[row.readStatus] }} </span>
      <span :title="row.operator" :class="{handing: row.taskStatus === 2}" slot="operator" slot-scope="text,row">{{ row.operator }} </span>
      <span :title="row.comment" :class="{handing: row.taskStatus === 2}" slot="comment" slot-scope="text,row">{{ row.comment }} </span>
    </p-table>
  </div>
</template>
<script>
import process from '@/api/process'
const columns = [
  {
    title: '创建时间',
    key: 'startTime',
    ellipsis: true,
    width: 180,
    scopedSlots: { customRender: 'startTime' },
  },
  {
    title: '处理时间',
    key: 'endTime',
    width: 180,
    ellipsis: true,
    scopedSlots: { customRender: 'endTime' },
  },
  {
    title: '节点名称',
    ellipsis: true,
    key: 'activityName',
    scopedSlots: { customRender: 'activityName' },
  },
  {
    title: '执行人',
    ellipsis: true,
    key: 'assigneeName',
    scopedSlots: { customRender: 'assigneeName' },
  },
  {
    title: '状态',
    key: 'readStatus',
    width: 90,
    ellipsis: true,
    scopedSlots: { customRender: 'readStatus' },
  },
  {
    title: '操作',
    key: 'operator',
    ellipsis: true,
    scopedSlots: { customRender: 'operator' },
  },
  {
    title: '处理意见',
    key: 'comment',
    ellipsis: true,
    scopedSlots: { customRender: 'comment' },
  },
]

export default {
  inject: ['processInstanceId', 'taskId'],
  data () {
    return {
      columns,
      readStatusMap: {
        1: '未读',
        2: '已读'
      },
      windowSize: true,
      tableData: [
        /* {
          startTime: '创建时间',
          endTime: '处理时间',
          activityName: '节点名称',
          assigneeName: '执行人',
          readStatus: '1',
          operator: 'operator',
          comment: '处理意见',
        } */
      ],
      tableHeight: '450',
    }
  },
  computed: {},
  methods: {
    getTaskRecordList () {
      process.getTaskRecordList({
         processInstanceId: this.processInstanceId,
      }).then(res => {
        this.tableData = res.data || []
        this.tableData.forEach((el, i) => {
          el.key = i + 1 + ''
        })
      })
    },
  },
  mounted () {
    this.getTaskRecordList()
  }
}
</script>
<style lang="less">
.processRecord{
  overflow: hidden;
  .handing{
    color: #409EFD;
  }
  .title-line{
    font-size: 16px;
    margin: 30px 0 10px 0;
  }
}
</style>
